<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>05.天气查询</title>
</head>
<body>
<div id="app">
    <!--文本输入框 v-on:keyup.delete="show":按下删除键,触发show事件函数,show函数会影藏天气信息-->
    <!--v-on:keyup.enter="searchCity": 按回车查询天气-->
    <input type="text" v-model="name" v-on:keyup.delete="show" v-on:keyup.enter="searchCity">
    <input type="button" value="搜索" v-on:click="searchCity"><!--点击鼠标执行searchCity事件函数,查询天气-->
    <br>
    <span v-for="city in array"><!--遍历数组-->
        <!--v-on:click.prevent="search(city)":点击鼠标执行search(city)事件函数,查询相应城市的天气-->
        <!--prevent:是阻止标签的默认行为,这里是阻止超链接-->
        <a href="" v-on:click.prevent="search(city)">{{city}}</a> &nbsp; &nbsp; &nbsp;
    </span>
    <hr>
    <span v-show="isShow"><!--默认隐藏天气信息-->
        <!--显示城市和该城市的天气-->
        {{name}},今天的天气是:{{msg}}
    </span>
</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "",/*城市名字*/
            array: ["北京", "上海", "广州", "深圳"],/*城市数组*/
            msg: "",/*城市天气信息*/
            isShow: false,/*是否显示城市信息*/

        },
        methods: {
            searchCity() {
                let _this = this;
                //发送axios请求
                axios.get("http://localhost:8989/city/find?name=" + this.name).then(function (response) {
                    console.log(response.data.m);/*response.data.m是从Map集合中拿到的value值*/
                    _this.msg = response.data.m;
                    _this.isShow = true;/*显示城市信息*/
                }).catch(function (error) {
                    console.log(error);
                });
            },
            show() {
                this.isShow = false;/*影藏城市信息*/
            },
            search(cit) {
                this.name = cit;/*赋值*/
                this.searchCity();/*查询城市名字为name的天气信息*/
            }
        }
    });


</script>
</body>
</html>